import React , {useState,useEffect} from 'react'
import Button from 'react-bootstrap/Button';
import DialogDataCellStyle from './DialogDataCellStyle';
import DialogEditStyle from './DialogEditStyle';

import DialogGeneralCategoriesData from "./DialogGeneralCategoriesData"

//props.isOpen
//props.onCancel
//props.onOk
//props.bandCount
//props.loginedUser
function DialogSelectStyle(props) {
    const [categories, setCategories] = useState([]);
    const [editStyleOpen, setEditStyleOpen] = useState(false) ;
    const [editStyleDialogTitle, setEditStyleDialogTitle] = useState("");
    const [currentStyleId, setCurrentStyleId] = useState(0);


    //异步加载系统与用户渲染方案
    const httpGetStyles = async function(){
        const api0 = global.g_serverAPIRoot + 'style/list/0' ;
        const api1 = global.g_serverAPIRoot + 'style/list/' +props.loginedUser.uid  ;

        const res0 = await fetch(api0) ;
        const resjson0 = await res0.json() ;

        const res1 = await fetch(api1) ;
        const resjson1 = await res1.json() ;

        let tempArr = [] ;
        tempArr.push({catname:'系统',datas:resjson0.data}) ;
        tempArr.push({catname:'用户',datas:resjson1.data}) ;

        setCategories(tempArr) ;
    }

    //刷新对话框列表
    useEffect(() => {
        if( props.isOpen === true ){
            httpGetStyles() ;
        }
    }, [props.isOpen])

    //单元格下载按钮
    const onCellDownloadButtonClicked = function(catindex,dataindex,data1){
        const textFile = new Blob([JSON.stringify(data1)], {type: 'application/json'}); //pass data from localStorage API to blob
        const element = document.createElement("a");
        element.href = URL.createObjectURL(textFile);
        element.download = "style.json";
        document.body.appendChild(element); 
        element.click();
        element.remove() ;
    }


    //单元格编辑按钮
    const onCellEditButtonClicked = function(catindex,dataindex,data1){
        setEditStyleDialogTitle("编辑渲染方案<"+ data1.description+ ">");
        setCurrentStyleId( data1.styleid );
        setEditStyleOpen(true);
    }

    //单元格删除按钮
    const onCellDeleteButtonClicked = function(catindex,dataindex,data1){
        const url = global.g_serverAPIRoot + "style/remove/" + data1.styleid ;
        fetch(url).then(()=>{
            //刷新
            httpGetStyles() ;
        }) ;
    }



    //绘制一个单元格
    const DataCellRender = function(catindex,dataindex,data1){

        return (
            <>
            <DialogDataCellStyle data={data1} />
            <div style={{fontSize:'14px',position:'relative',width:'100%',textAlign:'right'}}>
                <a style={{cursor:'pointer',paddingLeft:'8px',paddingRight:'8px',color:'rgb(11,94,215)'}} onClick={()=>onCellDownloadButtonClicked(catindex,dataindex,data1)}>下载</a>
                {
                    (catindex===1)?(
                        <>
                        |<a 
                        style={{cursor:'pointer',paddingLeft:'8px',paddingRight:'8px',color:'rgb(11,94,215)'}}
                        onClick={()=>onCellEditButtonClicked(catindex,dataindex,data1)}>编辑</a>
                        |<a
                        style={{cursor:'pointer',paddingLeft:'8px',paddingRight:'8px',color:'rgb(187,45,59)'}}
                        onClick={()=>onCellDeleteButtonClicked(catindex,dataindex,data1)}>删除</a>
                        </>
                    ):("")
                }
            </div>
            </>
            
        )  ;
    }

    //新建一个渲染方案
    const onDataCellHeaderAddStyleButtonClick = function(){
        setEditStyleDialogTitle("新建渲染方案");
        if( currentStyleId>0 ) setCurrentStyleId(0) ;
        else setCurrentStyleId( currentStyleId-1 );
        setEditStyleOpen(true);

    }

    //子对话框取消 关闭编辑渲染方案对话框 点击Cancel
    const onDialogEditStyleCancelClickCallback = function(){
        setEditStyleOpen(false);
    }

    //子对话框确认 编辑渲染方案对话框 点击OK
    const onDialogEditStyleOkClickCallback = function(){
        setEditStyleOpen(false);
        //刷新列表
        httpGetStyles() ;
    }


    //单元格列表顶部绘制
    const DataCellHeaderRender = function(catindex){
        if( catindex === 0 ) return "";
        else 
            return (
            <div style={{borderBottom:'1px solid rgb(200,200,200)'}}>
                <Button size='sm' variant='success' style={{margin:'4px'}}
                onClick={onDataCellHeaderAddStyleButtonClick}>+ 新建渲染方案</Button>
            </div>
            )
    }

    //点击取消 并关闭选择渲染方案对话框
    const onCancelCallback = function(){
        props.onCancel() ;
    }


    //点击确定
    const onOkCallback = function(catindex,dataindex) {
        //这里调用父组件方法，返回一个styleid
        if( catindex>=0 && dataindex>=0 ){
            const pickedStyleid = categories[catindex].datas[dataindex].styleid ;
            props.onOk(pickedStyleid) ;
        }
    }


    return (
        <>
            <DialogGeneralCategoriesData categories={categories}
                dialogTitle={"渲染方案"} dataCellRender={DataCellRender} 
                dataCellHeaderRender={DataCellHeaderRender} 
                onCancelCallback={onCancelCallback}
                onOkCallback={onOkCallback}
                isOpen={props.isOpen}
            />
            <DialogEditStyle 
                isOpen={editStyleOpen} 
                dialogTitle={editStyleDialogTitle} 
                onCancelClickCallback={onDialogEditStyleCancelClickCallback}
                onOkCallback={onDialogEditStyleOkClickCallback}
                numband={props.bandCount} styleid={currentStyleId}
                loginedUser={props.loginedUser}
            />
        </>
        
    )
}

export default DialogSelectStyle
